<script setup lang="ts">
    import { createTodoTaskReq, updateTodoTaskReq } from '@/api/todoTask'
    import useDebounce from '@/hooks/useDebounce'
    import { message } from 'ant-design-vue'
    import dayjs, { Dayjs } from 'dayjs'
    import { onMounted, reactive, ref } from 'vue'
    import SimpleInput from '@/components/AntDesign/SimpleInput.vue'

    const props = defineProps(['editRecord'])

    interface FormState {
        name: string
        assignTime: Dayjs
        assignPerson: string
        description: string
        endTime: Dayjs | null
        status: number
        startTime: Dayjs | null
        finishTime: Dayjs | null
        cancelTime: Dayjs | null
        cancelReason: string
        priority: number
    }

    const formState = reactive<FormState>({
        name: '',
        assignTime: dayjs(),
        assignPerson: '',
        description: '',
        endTime: null,
        status: 0,
        startTime: null,
        finishTime: null,
        cancelTime: null,
        cancelReason: '',
        priority: 0,
    })

    const formRef = ref()

    const showModal = defineModel()

    const onSubmit = useDebounce(() => {
        formRef.value
            .validate()
            .then(async () => {
                if (props.editRecord) {
                    const res = await updateTodoTaskReq({
                        id: props.editRecord.id,
                        ...formState,
                    })
                    if (res) {
                        message.success(`编辑成功`)
                        showModal.value = false
                    } else {
                        message.error(`编辑失败`)
                    }
                } else {
                    const res = await createTodoTaskReq({ ...formState })
                    if (res?.data?.id) {
                        message.success(`添加成功`)
                        showModal.value = false
                    } else {
                        message.error(`添加失败`)
                    }
                }
            })
            .catch(() => {})
    }, 500)

    onMounted(() => {
        if (props.editRecord) {
            // Convert date strings to dayjs objects
            const record = { ...props.editRecord }
            if (record.assignTime) {
                record.assignTime = dayjs(record.assignTime)
            }
            if (record.endTime) {
                record.endTime = dayjs(record.endTime)
            }
            if (record.startTime) {
                record.startTime = dayjs(record.startTime)
            }
            if (record.finishTime) {
                record.finishTime = dayjs(record.finishTime)
            }
            if (record.cancelTime) {
                record.cancelTime = dayjs(record.cancelTime)
            }
            Object.assign(formState, record)
        }
    })
</script>

<template>
    <a-form
        ref="formRef"
        :model="formState"
        name="PlayerModalForm"
        style="padding: 20px"
    >
        <SimpleInput
            name="name"
            label="名称"
            v-model="formState.name"
        />

        <SimpleInput
            name="priority"
            label="优先级"
            :required="false"
            v-model="formState.priority"
        />

        <SimpleInput
            name="description"
            label="描述"
            :required="false"
            v-model="formState.description"
        />

        <a-form-item
            name="assignTime"
            label="指派时间"
            :validate-trigger="['']"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 14 }"
            :rules="[{ required: true, message: '指派时间不能为空' }]"
        >
            <a-date-picker
                show-time
                v-model:value="formState.assignTime"
            />
        </a-form-item>

        <SimpleInput
            name="assignPerson"
            label="指派人"
            :required="false"
            v-model="formState.assignPerson"
        />

        <a-form-item
            name="endTime"
            label="截止时间"
            :validate-trigger="['']"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 14 }"
        >
            <a-date-picker
                show-time
                v-model:value="formState.endTime"
            />
        </a-form-item>

        <SimpleInput
            name="status"
            label="状态"
            placeholder="0:等待 1:进行 2:完成 3:取消"
            :required="false"
            v-model="formState.status"
            v-if="editRecord"
        />

        <a-form-item
            name="startTime"
            label="开始时间"
            :validate-trigger="['']"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 14 }"
            v-if="editRecord"
        >
            <a-date-picker
                show-time
                v-model:value="formState.startTime"
            />
        </a-form-item>

        <a-form-item
            name="finishTime"
            label="完成时间"
            :validate-trigger="['']"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 14 }"
            v-if="editRecord"
        >
            <a-date-picker
                show-time
                v-model:value="formState.finishTime"
            />
        </a-form-item>

        <a-form-item
            name="cancelTime"
            label="取消时间"
            :validate-trigger="['']"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 14 }"
            v-if="editRecord"
        >
            <a-date-picker
                show-time
                v-model:value="formState.cancelTime"
            />
        </a-form-item>

        <SimpleInput
            name="cancelReason"
            label="取消原因"
            :required="false"
            v-model="formState.cancelReason"
            v-if="editRecord"
        />

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button
                type="primary"
                style="width: 200px; height: 40px"
                @click="onSubmit"
                >提交</a-button
            >
        </a-form-item>
    </a-form>
</template>

<style scoped lang="less"></style>
